<template>
  <div>
    <el-menu :default-openeds="[]" background-color="#545c64" text-color="#ffffff" :collapse="isCollapse">
      <div class="mb-2">系统</div>
      <el-submenu
        v-for="(item, index) in routerList"
        :key="index"
        :index="item.id" >
          <template v-slot:title>
            <i :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group
            v-for="(iTs,indexs) in item.children"
            :key="`${index}+${indexs}`"
            :index="iTs.id"
          >
            <span class="iTsSpan" @click="toRoute(iTs.path)">{{ iTs.name }}</span>
          </el-menu-item-group>
      </el-submenu>
    </el-menu>

  </div>
</template>

<script>
export default {
  name: 'LivestocksystemRightBar',

  data () {
    return {
      isCollapse: false,
      routerList: JSON.parse(sessionStorage.getItem('routerList'))
    }
  },

  mounted () {
  },

  methods: {
    toRoute (val) {
      this.$router.push({ path: `/${val}` })
    }
  }
}
</script>

<style lang="scss">

.mb-2 {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
.iTsSpan {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}
</style>
